<template>
  <div class="home" :class="{isShow}">
    <!-- 头部区域 -->
    <el-row>
      <el-col :span="4" class="home_logo" :offset="1">
        <a href="http://localhost:8080/#/home" @click="main">
          <img src="../assets/img/vue.png" alt="">
          <div class="grid-content bg-purple">管理系统</div>
        </a>

      </el-col>
      <el-col :span="5" :offset="3">
        <el-autocomplete class="inline-input" v-model="input" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect" prefix-icon="el-icon-search" clearable></el-autocomplete>
      </el-col>
      <el-col :span="10" :offset="1" class="">
        <el-menu class="el-menu-demo" mode="horizontal" text-color="#409EFF">
          <el-menu-item index="1">处理中心</el-menu-item>
          <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-menu-item index="2-4">选项4</el-menu-item>
          </el-submenu>
          <el-menu-item index="3">消息中心</el-menu-item>
          <el-menu-item index="4"><a href="" target="_blank">退出登录</a></el-menu-item>
        </el-menu>
      </el-col>
    </el-row>

    <!-- 主体区域 -->
    <el-row class="content">
      <!-- 侧边栏区域 -->
      <el-col :span="6" class="sidebar" :offset="1">
        <h5>我是侧边栏</h5>
        <el-menu default-active="2" class="el-menu-vertical-demo">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-picture-outline"></i>
              <span>{{data.anime.name}}</span>
            </template>
            <el-menu-item-group>
              <template slot="title">日漫</template>
              <el-menu-item index="1-1" @click="ninja">{{data.anime.content[0]}}</el-menu-item>
              <el-menu-item index="1-2" @click="gameOneLife">{{data.anime.content[1]}}</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="国漫">
              <el-menu-item index="1-3">{{data.anime.content[2]}}</el-menu-item>
              <el-menu-item index="1-4">{{data.anime.content[3]}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-star-off"></i>
              <span>{{data.sidebar.name}}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1">
                <span>{{data.sidebar.content[0]}}</span>
              </el-menu-item>
            </el-menu-item-group>

          </el-submenu>

          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">这个不让点</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">{{data.setBar.name}}</span>
          </el-menu-item>
          <el-menu-item index="5" @click="calendar">
            <i class="el-icon-date"></i>
            <span>{{data.date.name}}</span>
          </el-menu-item>
          <el-menu-item index="6" @click="message">
            <i class="el-icon-circle-plus"></i>
            <span>{{data.message.name}}</span>
          </el-menu-item>
          <el-menu-item index="7">
            <i class="el-icon-circle-plus"></i>
            <span>{{data.sidebar1.name}}</span>
          </el-menu-item>
          <el-menu-item index="8">
            <i class="el-icon-circle-plus"></i>
            <span>{{data.sidebar1.name}}</span>
          </el-menu-item>
          <el-menu-item index="9">
            <i class="el-icon-circle-plus"></i>
            <span>{{data.sidebar1.name}}</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <!-- 显示区域 -->
      <el-col :span="15">
        <router-view></router-view>
      </el-col>
    </el-row>

    <!-- 底边区域 -->
    <el-col :span="24">
      <el-container>
        <el-footer class="nav-bar-footer">
          <div class="footer">
            你好，{{username}}
            <el-button v-if="!isShow" type="success" @click="btn">花里胡哨</el-button>
            <el-button v-else type="danger" @click="btn">关闭</el-button>
          </div>

        </el-footer>
      </el-container>
    </el-col>
  </div>
</template>

<script>
  import data from 'common/data.js'

  export default {
    data() {
      return {
        data,
        username: this.$route.query.name,
        id: this.$route.query.id,
        input: '',
        restaurants: [],
        isShow: false,
      }
    },
    methods: {
      gameOneLife() {
        this.$router.push('/home/1-1').catch(err => { err })
      },
      ninja() {
        this.$router.push('/home/1-2').catch(err => { err })
      },
      main() {
        this.$router.push('/home').catch(err => { err })
      },
      calendar() {
        this.$router.push('/home/1-3').catch(err => { err })
      },
      message(){
        this.$router.push('/home/1-4').catch(err => {err})
      },
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
          { "value": "游戏人生", url: '/home/1-1' },
          { "value": "火影忍者", url: '/home/1-2' },
          { "value": "秦时明月", url: '' },
          { "value": "斗罗大陆", url: '' },
          { "value": "主页", url: '/home' },
          { "value": "日历", url: '/home/1-3' },
          { "value": "设置", url: '' },

        ]
      },
      handleSelect(item) {
        this.$router.push(item.url)
      },
      btn() {
        return this.isShow = !this.isShow
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    },

  }
</script>

<style lang="less">
  .home {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    margin: 20px 0 auto;
  }

  .home_search {
    width: 30%;
  }

  .home_header {
    position: relative;
  }

  .home_input {
    margin-top: 20px;
  }

  .home_logo img {
    margin-top: 5px;
    width: 50px;
    height: 50px;
  }

  .home_logo div {
    display: inline-block;
    margin-left: 10px;
    font-size: 30px;
    line-height: 30px;
    color: #409EFF
  }

  .content {
    margin-top: 30px;
  }

  .sidebar h5 {
    text-align: center;
    font-size: 20px;
    color: #909399;
  }

  .footer { 
    height: 200px;
    margin-top: 50px;
    background-color: #f7fbfd;
  }

  .btn {
    width: 100px;
    height: 100px;
  }
  .isShow {
    background: url(../assets/img/01lwo9.jpg);
    background-size: 100%;
  }
</style>